<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>">
	<meta charset="utf-8" http-equiv="content-type" content="text/html">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>广场专题</title>

	<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
	<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
	
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/square-topic.css" />
	<link rel="stylesheet" type="text/css" href="css/footer.css">
	<link rel="stylesheet" type="text/css" href="css/need/layer.css"/>
<script type="text/javascript" src="js/layer.js"></script>

	<script>
	$(document).bind('mobileinit',function(){
	 $.mobile.changePage.defaults.changeHash = false;
	 $.mobile.hashListeningEnabled = false;
	 $.mobile.pushStateEnabled = false;
	});
	</script>
	<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="user_page">
 	<div data-role="content" class="content">
 		<div class="header">
 			<div class="title">
 				<div>
 					<span class="title-c"></span>
 					<span class="time"></span>
 				</div>
 				<div class="concern">
 					<a href="javascript:void(0)"></a>&nbsp;
 					<a href="javascript:void(0)"></a>
 				</div>
 			</div>
 			<div class="post">
 				<a href="api/write/square.do">我要发文</a>
 			</div>
 		</div>

 	</div>

 	<!--底部-->
 	<jsp:include page="../footer.jsp" flush="true" />
</div>
</body>
<script type="text/javascript">
$(function(){
	setBase();
})
function setBase(){
	setTopicInfo();
	loadStoryList(1);
	
}
function setTopicInfo(){
	$.post("api/thingStory/getTopicInfo.do",{topicId:'${topicId}'},function(data){
		if(data.STATUS=="OK"){
			
			$(".title-c").html(data.NAME);
			$(".concern a:eq(0)").html("关注 "+data.GUANZHU);
			$(".concern a:eq(1)").html("好文 "+data.STORY);
		}else{
			//信息框
			  layer.open({
			    content: data.DESC
			    ,btn: '我知道了'
			  });
		}
	},'json');
}
function loadStoryDesc(div){
	var id = $(div).attr("id");
	window.location.href="api/square/storyDetail.do?STORY_ID="+id;
}
//加载故事列表
var isLast = false;
function loadStoryList(pageNum){
	if(isLast == false){
		var url = "api/square/getStoryList.do";
		$.post(url,{topicId:'${topicId}',pageNum:pageNum,pageSize:10},
		function(data){
			if(data["STATUS"]=="OK"){
				var resultListJson = eval("("+data["RESULTLIST"]+")");
				var html= '';
				$.each(resultListJson,function(keyDaily,valueDaily){
					html+='<div class="topic-c" id="'+valueDaily.ID+'" onclick="loadStoryDesc(this);">';
					html+='<div class="face">';
					html+='<a href="javascript:void(0)">';
					html+='<img src="'+valueDaily.USERIMG+'"/>';
					html+='</a>';
					html+='</div>';
					html+='<div class="user-detail">';
					html+='<div class="u-info">';
					html+='<a href="javascript:void(0)">'+valueDaily.USERNICKNAME+'</a>';
					html+='<a href="javascript:void(0)">';
					html +='<img src="images/g'+(valueDaily.LEVEL+1)+'.png" />';
					html+='</a>';
					html+='</div>';
					html+='<div class="u-text">';
					html+='<a href="javascript:void(0)">';
					html+='<p>'+valueDaily.TITLE+'</p>';
					if(typeof(valueDaily.IMG) != 'undefined'){
						html+='<img src="'+valueDaily.IMG+'"/>';
					}
					html+='</a>';
					html+='</div>';
					html+='<div class="ass-like">';					
					html+='<a class="like" href="javascript:void(0)">';
					html+='<img src="images/like.png"/>';
					html+='<span>'+valueDaily.LIKE+'</span>';
					html+='</a>';
					html+='<a href="javascript:void(0)">';
					html+='<img src="images/assess.png">';
					html+='<span>'+valueDaily.COMMENTNUM+'</span>';
					html+='</a>';
					html+='</div>';
					html+='</div>';
					html+='</div>';
				});
				isLast = data["isLast"];
				$(".content").append(html);
			}
		},'json');
	}
}
</script>
</html>